<template>
  <div class="musiccreate">
    <h1>歌曲{{ id ? `编辑——${id}` : "创建" }}</h1>
    <br />
    <el-form label-width="120px" @submit.native.prevent="save()">
      <el-form-item label="歌曲名">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item label="歌手">
        <el-input v-model="model.artist"></el-input>
      </el-form-item>
      <el-form-item label="歌曲ID">
        <el-input v-model="model.m_id"></el-input>
      </el-form-item>
      <el-form-item label="图片地址">
        <el-input v-model="model.pic_url"></el-input>
      </el-form-item>
      <el-form-item label="资源路径">
        <el-select filterable v-model="model.source" placeholder="请选择">
          <el-option
            v-for="item in source"
            :key="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="歌词">
        <el-input
          v-model="model.lyric"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 10 }"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-button round type="primary" native-type="submit">
            保存
          </el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "MusicCreate",
  components: {},
  props: {
    id: {},
  },
  data() {
    return {
      model: {},
      source: [
        {
          label: "netease",
        },
        {
          label: "tencent",
        },
        {
          label: "xiami",
        },
        {
          label: "kugou",
        },
        {
          label: "baidu",
        },
      ],
    };
  },
  methods: {
    async save() {
      let res;
      if (this.id) {
        // await  this.$jsonp("http://www.gequdaquan.net/gqss/api.php/", {
        //     types:"lyric",
        //     id:this.model.m_id
        //   }).then(data=>{
        //     this.model.lyric=JSON.stringify(data.lyric).replace(/"/gi, "");
        //   })
        res = await this.$http.put(`rest/music/edit/${this.id}`, this.model);
      } else {
        res = await this.$http.post("rest/music/create", this.model);
      }
      this.$message({
        type: "success",
        message: "保存成功",
      });
      this.$router.push("/music/list");
    },
    async fetch() {
      const res = await this.$http.get(`rest/music/edit/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.id && this.fetch();
  },
};
</script>

<style scoped></style>
